<template>
	<view>
		<view class="top-box">
			<view @click="toUpdateUser" style="background-color: #009688;"
				class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-22 u-p-22">
				<view class="u-m-r-10">
					<u-avatar :src="userInfo.avatar" size="160"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20 u-p-l-20">{{userInfo.userName}}</view>
					<view class="u-font-14 u-tips-color u-p-l-20" style="color: white;">
						<text space="emsp">ID: {{userInfo.userId}}</text>
					</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="white" size="36"></u-icon>
				</view>
			</view>
			<view style="position: relative;">
				<!-- <view style="position: absolute; top: 10rpx;left: 40rpx;padding: 10rpx" @click="fresh">
					<image class="fresh-img" src="../../../static/imgs/fresh.png"></image>
				</view> -->
				<view class="tag-box">
					<view class="tag-item">
						<view style="text-align: center;">
							<text style="font-size: 45rpx;color: white;">{{numberInfo.number}}</text>
						</view>
						<view style="margin-top: 15rpx;">
							<text style="font-size: 25rpx;">{{numberInfo.title}}</text>
						</view>
						<view style="position: relative; top: -130rpx;left: 50rpx;">
							<u-badge type="error" :absolute="true" :count="numberInfo.count"></u-badge>
						</view>
					</view>
					<view class="tag-item">
						<view style="text-align: center;">
							<text style="font-size: 45rpx;color: white;">{{tranInfo.number}}</text>
						</view>
						<view style="margin-top: 15rpx;">
							<text style="font-size: 25rpx;">{{tranInfo.title}}</text>
						</view>
						<view style="position: relative; top: -130rpx;left: 60rpx;">
							<u-badge type="error" :absolute="true" :count="tranInfo.count"></u-badge>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<button click="btn" open-type="share" class="btn">
					<u-cell-item :icon-size="80" :icon-style="{color: '#FFBB00'}" :titleStyle="{  fontSize: '32rpx' }"
						icon="gift" title="邀请新用户" label="每邀请一个新用户,使用次数+2">
					</u-cell-item>
				</button>
			</u-cell-group>
		</view> -->
		

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item @click="toUpdateUser" icon="setting" title="个人设置"></u-cell-item>
				<u-cell-item icon="rmb-circle" title="支付记录" @click="toPayRecord"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		getHost,
		ucenterApis
	} from '@/apis/index';

	export default {
		onLoad() {
			var _this = this;
			uni.$on('userInfoUpdated', (flag) => {

				_this.loadUseInfo()
			});

		},
		onShow() {
		
		},
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});
			//#endif
		},
		data() {
			return {
				tranShow: false,
				numberInfo: {
					number: '', //剩余
					title: '可用次数',
					count: '' //今日新增
				},
				tranInfo: {
					number: '',
					title: '可查看天数',
					count: ''
				},
				userInfo: {
					userId: '',
					userName: '',
					sex: '',
					avatar: '',
				}
			}
		},
		methods: {
			toPayRecord(){
				uni.navigateTo({
					url: '../../pay/payRecord/payRecord'
				});
			},
			
			recommend() {
				//跳转第三方
				wx.navigateToMiniProgram({
					appId: 'wx03388219d7412766',
					path: 'pages/index/index',
					envVersion: 'release',
					success(res) {

					}
				})
			},

			toUpdateUser() {
				uni.navigateTo({
					url: '../updateUser/updateUser'
				});
			},

			getWxUserInfo() {
				var _that = this;
				_that.userInfo = _that.$store.state.wxUser;

				console.log(_that.userInfo)

				_that.numberInfo.number = userInfo.userUseNumber;
				_that.tranInfo.number = userInfo.userExpireDateNumber;
			},

			onShareAppMessage(res) {
				console.log("userId:" + this.userInfo.userId)
				return {
					title: '全国财税甩单圈,快来试试吧',
					imageUrl: '../../../static/imgs/pdf_zh.jpg',
					path: '/pages/index/index?userId=' + this.userInfo.userId
				}
			},


			loadUseInfo() {
				//请求后端更新记录,更新使用信息
				this.getWxUserInfo()
			},
			fresh() {
				let _this = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				setTimeout(function() {
					//关闭下拉刷新

					_this.loadUseInfo();

					uni.hideLoading({
						complete: () => {
							uni.showToast({
								icon: 'success',
								title: '加载完成',
							})
						}
					});

				}, 3000)
			}

		},
		mounted() {
			//加载用户信息
			const _that = this
			let userInfo = _that.$store.state.wxUser;

			console.log(userInfo)
			_that.userInfo = userInfo;

			// _that.loadUseInfo()

			_that.numberInfo.number = userInfo.userUseNumber;
			// _that.numberInfo.count = userInfo.pdfCurrentCount;

			_that.tranInfo.number = userInfo.userExpireDateNumber;
			// _that.tranInfo.count = userInfo.tranCurrentCount;
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
			//点击后灰色
		}
	}

	.user-box {
		background-color: #fff;
	}

	.tag-box {
		display: flex;
		justify-content: space-around;
	}

	.top-box {
		// border: 1px red solid;
		height: 375rpx;
		background-color: #009688;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		color: white !important;
	}

	.tag-item {
		// border: 1px red solid;
	}


	.fresh-img {
		height: 60rpx;
		width: 60rpx;
	}

	.btn {
		background-color: #FFFFFF;
		background-color: transparent;
		outline: none;
		padding-left: 0rpx;
		padding-right: 0rpx;
		border-radius: 0rpx;
	}

	.s-top {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
	}

	.s-text {
		margin-top: 10rpx;
		text-align: center;
		font-size: 32rpx;
		color: #B8860B;
	}

	.s-but {
		display: flex;
		justify-content: space-around;
		margin-top: 70rpx;
	}
</style>